<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>座位选择</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <script src="js/vue.js"></script>
    <script src="js/getParameter.js"></script>
    <style>
        ul{
            list-style: none;
        }
        img{
            width: 130px;
        }
        .greenImgClass{
            content: url("img/greenSeat.jpg");
        }
        .greenImgClass:hover{
            content: url("img/blurSeat.jpg");
        }
        .redImgClass{
            content: url("img/redSeat.jpg");
        }
        .blurImgClass{
            content: url("img/blurSeat.jpg");
        }

    </style>
</head>
<body>
<div id="all">
    <img src="img/logo.jpg" style="width: 50%" ><br>
    <div style="position: absolute;top: 30%;" class="btn-group-vertical btn-group btn-group-lg" role="group" aria-label="...">
        <button type="button" :class="nowUrl=='/studentStatus.html'?btnInfo:btnDefault" @click="goToStudentStatus">我的预约情况</button>
        <button type="button" :class="nowUrl=='/studentChooseTime.html'?btnInfo:btnDefault" @click="studentChooseTime">选择预约时间</button>
        <button type="button" :class="nowUrl=='/studentChooseSeat.html'?btnInfo:btnDefault">选择预约位置</button>
    </div>

    <div style="margin-left:10%;">
        <ul v-for="indexUl in 5" style="width:100%;height: 100px;padding-left: 15%;">
            <li v-if="indexUl%2 == 1"  v-for="indexLi in 6" style="float: left;padding-left: 30px"><span style=" position:absolute;padding-left: 58px;padding-top: 30px">{{(indexUl-1)*6-2*(parseInt(indexUl/2))+indexLi}}</span>
                <img v-if="reservatedNumList.indexOf((indexUl-1)*6-2*(parseInt(indexUl/2))+indexLi)!=-1" class="redImgClass" style="width: 130px;">
                <img v-if="(reservatedNumList.indexOf((indexUl-1)*6-2*(parseInt(indexUl/2))+indexLi))==-1" @click="beginReservation((indexUl-1)*6-2*(parseInt(indexUl/2))+indexLi)" class="greenImgClass" style="width: 130px;">
            </li>
            <li v-if="indexUl%2 == 0" v-for="indexLi in 4" style="padding-left: 6%;float: left"><span style=" position:absolute;padding-left: 58px;padding-top: 30px">{{(indexUl-1)*6-2*(parseInt(indexUl/2)-1)+indexLi}}</span>
                <img v-if="reservatedNumList.indexOf((indexUl-1)*6-2*(parseInt(indexUl/2)-1)+indexLi)!=-1" class="redImgClass">
                <img v-if="reservatedNumList.indexOf((indexUl-1)*6-2*(parseInt(indexUl/2)-1)+indexLi)==-1" @click="beginReservation((indexUl-1)*6-2*(parseInt(indexUl/2))+indexLi)" class="greenImgClass">
            </li>
        </ul>
    </div>

    <div class="btn-group dropup" style="left: 40%;margin-top: 8%">
        <button type="button" class="btn btn-default">{{floarNum+"楼"}}</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
            <li v-for="index in 5" @click="changeFloarNum(index)">{{index+"楼"}}</li>
        </ul>
    </div>

    <div class="btn-group dropup" style="left: 50%;margin-top: 8%">
        <button type="button" class="btn btn-default">{{area+"区"}}</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
            <li v-for="(item,index) in ['A','B','C','D']" @click="changeArea(item)">{{item+"区"}}</li>
        </ul>
    </div>
</div>

</div>
</body>
<script>
    var v1=new Vue({
        el:"#all",
        data:{
            redImg:"img/redSeat.jpg",
            greenImg:"img/greenSeat.jpg",
            blurImg:"img/blurSeat.jpg",
            floarNum:1,
            area:"A",
            reservatedNumList:[],
            //当前url地址
            nowUrl:window.location.pathname,
            isdefaultOrNot:window.location.pathname=='/student.html',
            btnInfo:'btn btn-info',
            btnDefault:'btn btn-default',
        },
        methods:{
            //定义一个修改当前层数的方法
            changeFloarNum(num){
                this.floarNum=num;
                //同时需要将区域修改为A
                this.area="A";
                //修改层数以后，调用reservatedSeat()方法判断哪些位置是已经被预约了的
                reservatedSeat(this.floarNum,this.area);
                alert(this.reservatedNumList);
            },

            //定义一个修改当前区域的方法
            changeArea(item){
                this.area=item;
                //修改area以后，调用reservatedSeat()方法判断哪些位置是已经被预约了的
                reservatedSeat(this.floarNum,this.area);
            },
            //定义一个发送ajax开始预约的方法
            beginReservation(seatNum){
                var beginTime=getParameter("beginTime");
                var overTime=getParameter("overTime");
                if ( confirm("确定预约"+this.floarNum+"楼"+this.area+"区"+seatNum+"号座位吗？")){
                    //用户确定预约，发送ajax请求开始预约;
                    $.ajax({
                        type:"get",
                        url:"beginReservation",
                        data:{
                            "addressFloar":this.floarNum,
                            "addressArea":this.area,
                            "addressNum":seatNum,
                            "beginTime":beginTime,
                            "overTime":overTime,
                        },
                        async:true,
                        success:function (resp) {
                            eval(resp);
                            if (resp.reservatResult=="true"){
                                alert("恭喜您预约成功");
                                location.href="studentStatus.html"
                            }else{
                                alert(resp.errorReason)
                                if (resp.errorReason=="您已经有预定了" ){
                                    location.href="studentStatus.html"
                                }
                            }
                        }
                    })
                }
            },
            //定义一个重新回到选择时间的页面
            studentChooseTime(){
                location.href="studentChooseTime.html"
            },
            //定义一个返回到状态页的方法
            goToStudentStatus(){
                location.href="studentStatus.html"
            }
        }
    });
    reservatedSeat(v1.floarNum,v1.area);

    //定义一个发送ajax请求的方法，用于判断当前楼层和区域有哪一些位置是被预约了的
    //要求传入当前楼层和区域
    function reservatedSeat(floarNum,area) {
        //获取到地址栏中传入的开始时间beginTime和结束时间overTime
        var beginTime=getParameter("beginTime");
        var overTime=getParameter("overTime");
        $.ajax({
            type:"get",
            url:"reservatedSeat",
            data:{
                "floarNum":floarNum,
                "area":area,
                "beginTime":beginTime,
                "overTime":overTime,
            },
            async:false,
            success:function(resp){
                eval(resp);
                //指定一个数组，用于装入返回集合的addressNum
                var arr=[];
                //传回来的resp是一个集合，遍历此集合，改变图片的样式为红色
                for (var i=0;i<resp.length;i++){
                    arr.push(parseInt(resp[i].addressNum));
                }
                v1.reservatedNumList=arr;
            }
        })
    }
</script>
</html>